{% extends 'front/user_info_manage/base_user_info.html' %}

{% block title %}收货地址{% endblock %}

{% block css %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/address/ydui.css') }}">
{% endblock %}

{% block main_right %}
    <div class="col-md-10 address-ul ">
        <ul>
            {% for addrss in addr %}
                <li>
                    <input id="{{ addrss._id }}" hidden>
                    <label for="{{ addrss._id }}">
                        <p class="left"><span>收货人：</span>{{ addrss.name }} </p>
                        <p class="right">&nbsp; &nbsp;<span>手机号：</span>{{ addrss.tel }}</p>
                        <p class="address-info"><span>收货地址：</span>
                            <span>{{ addrss.province }}</span>
                            <span>{{ addrss.city }}</span>
                            <span>{{ addrss.district }}</span>
                            <span>{{ addrss.details }}</span>
                        </p>
                        {#                            userinfo.js文件触发控制事件#}
                        <a href="{{ url_for('userinfo.address_change', _id=addrss._id) }}">修改</a>
                        <a href="#" onclick="addressDelete('{{ addrss._id }}')">删除</a>
                        <a href="#" onclick="addressDefault('{{ addrss._id }}')">设为默认地址</a>
                                            {% if address_default|safe == addrss._id|safe %}
                        <img class="address-default right"
                             src="{{ url_for('static', filename='images/something/c10.png') }}"
                             alt="默认收货地址">
                    {% endif %}
                    </label>

                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="a-link text-center"><a href="#" id="new_addr">添加收货人信息</a></div>
    <div class="add_address" style="display:none ">
        <div class="graybox"></div>
        <div class="popbox">
            <div class="poptop">
                <h3>填写收货人信息</h3>
                <a href="#" class="close"></a>
            </div>
            <form method="post">
                <div class="top"></div>
                <div class="content">
                    <ul>
                        <li><span>姓名</span><input name="name" id="addr_name" required></li>
                        <li><span>手机号码</span>
                            <input name="tel" id="addr_tel" required minlength="11" maxlength="11"
                                   pattern="[0-9]{11}">
                        </li>
                        <li><span class="">所在地区</span>
                            <section class="g-flexview">
                                <section class="g-scrollview">
                                    <div class="m-cell">
                                        <div class="cell-item">
                                            <div class="cell-right cell-arrow">
                                                <input type="text"
                                                       class="cell-input"
                                                       readonly id="J_Address2"
                                                       value="{% if addr.province %} {{ addr.province }} {{ addr.city }}{% endif %}"
                                                       placeholder="请选择收货地址" name="address">
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </section>
                        </li>
                        <li><span>详细地址</span><input name="details" id="addr_details"></li>
                    </ul>
                    {% for message in get_flashed_messages() %}
                        <div class="flash"><b>{{ message }}</b></div>
                    {% endfor %}
                </div>
                <div class="bottom">
                    <button class="btn btn-default address-close" type="reset">取消</button>
                    <button class="btn btn-info" type="submit">提交</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/address/ydui.flexible.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.citys.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.js') }}"></script>
    <script type="text/javascript">
        /**
         * 默认调用
         */
        !function () {
            var $target = $('#J_Address');

            $target.citySelect();

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
        /**
         https://www.jb51.net/jiaoben/577191.html#downintro2
         * 设置默认值
         */
        !function () {
            var $target = $('#J_Address2');

            $target.citySelect({
                provance: "",
                city: "",
                area: ""
            });

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
    </script>
{% endblock %}